<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险等级分析报告</title>
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('百度ECharts')" />
    <style>
        .bing{
            height: 500px;
            width: 80%;
            margin-left: 68px;
        }

        .lisi{
            height: 500px;
            width: 80%;
            margin-left: 68px;
        }

    </style>

</head>
<body class="gray-bg">
    <div class="row animated fadeInRight">
        <div class="ibox float-e-margins" >
            <div class="text-center float-e-margins p-md">
                <span style="font-size: 25px;">[[${riskLevelData.org}]]风险等级分析报告 </span>
<!--                <a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>-->
<!--                <a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>-->
            </div>
            <div id="ibox-content">
                 <div id="vertical-timeline" class="vertical-container light-timeline">
                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon navy-bg">
                             <i class="fa fa-briefcase"></i>
                         </div>

                         <div class="vertical-timeline-content">
                             <h2>报告编号 :[[${riskLevelData.ristLevel}]] &nbsp; &nbsp; &nbsp; 时间 :[[${#dates.format(riskLevelData.time,'yyyy-MM-dd HH:mm:ss')}]]</h2>
                             <p>风险类型 : <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==3}">火灾</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==2}">盗窃</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==1}">盗掘</label>
                                 <input type="checkbox" style="margin-left: 10px"  th:checked="${riskLevelData.ristType==4}">法人违法</label>
                             </p>
                             <a th:href="@{/index}" class="btn btn-sm btn-info" style="margin-left: 10px;"> 管理后台</a>
                             <a th:href="'/system/main?orgId='+${id}"  class="btn btn-sm btn-info"> 返回大屏</a>
                             <span class="vertical-date">
                         	风险等级 : [[${riskLevelData.ristLevel}]]<br><br>
                         <small style="color:orangered">涉及异常事件总数 :[[${ROrgRiskEvents.size()}]]</small>
                     </span>
                         </div>
                     </div>


                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon blue-bg">
                             <i class="fa fa-file-text"></i>
                         </div>

                         <div class="echarts bing" id="echarts-pie-chart"></div>

                     </div>

                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon blue-bg">
                             <i class="fa fa-file-text"></i>
                         </div>
                         <div class="echarts lisi" id="echarts-bar-chart"></div>


                     </div>



                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon lazur-bg">
                             <i class="fa fa-coffee"></i>
                         </div>

                         <div class="ibox lisi">
                             <div class="ibox-content">
                                 <h5>详细信息</h5>
                                 <table class="table table-stripped small m-t-md">
                                     <tbody>
                                     <tr th:each="orgE : ${ROrgRiskEvents}">
                                         <td class="no-borders">
                                             <i class="fa fa-circle text-danger"></i>
                                         </td>
                                         <td class="no-borders">
                                             风险名称： [[${orgE.name}]],  风险事件： [[${orgE.riskType}]],   经纬度： [[${orgE.coordinate}]],    设备： [[${orgE.device}]], 时间：[[${#dates.format(orgE.createTime,'yyyy-MM-dd HH:mm:ss')}]]
                                         </td>
                                     </tr>


                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>

                     <div class="vertical-timeline-block">
                         <div class="vertical-timeline-icon yellow-bg">
                             <i class="fa fa-file-text"></i>
                         </div>

                         <div class="vertical-timeline-content">
                             <h2>其他信息</h2>
                             <p>[[${riskLevelData.desc}]]</p>
<!--                             <span class="vertical-date">昨天 <br><small>2月2日</small></span>-->
                         <input type="hidden" id="lev" th:value="${lev}">
                         </div>
                     </div>

                 </div>
             </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script>
        $(document).ready(function(){
            $('#lightVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').removeClass('ibox-content');
                $('#vertical-timeline').removeClass('dark-timeline');
                $('#vertical-timeline').addClass('light-timeline');
            });
            $('#darkVersion').click(function(event) {
                event.preventDefault()
                $('#ibox-content').addClass('ibox-content');
                $('#vertical-timeline').removeClass('light-timeline');
                $('#vertical-timeline').addClass('dark-timeline');
            });
        });
    </script>
    <script type="text/javascript">
        var id = [[${id}]];
        $(function () {
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            // var type = [[${type}]];
            // console.log(type)

            console.log(id)
            $.getJSON("../system/risk/list?orgId=" + id +"&lev=" + $("#lev").val(), function (r) {
                var title = "风险统计";
                var names = []
                var  data = []
                $.each(r.rows, function(index, value) {
                    names.push(value.name)
                    data.push({'name':value.name, 'value':value.cnt})
                })
                var pieoption = {
                    title: {
                        text: title,
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: names
                    },
                    calculable: true,
                    series: [
                        {
                            name: title,
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);

            })

            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));

            $.getJSON("../system/history/list?orgId=" + id +"&_" + $.now(), function (r) {
                var title = "历史统计";
                var names = []
                let data = []
                let series_data = []
                let yAxis_data = []
                $.each(r.rows, function(index, value) {
                    if(names.indexOf(value.name) == -1){
                        names.push(value.name)
                    }
                })
                for (let i = 0; i < names.length; i++) {
                    data_cur = [0,0,0,0,0,0,0,0,0,0,0,0]
                    data.push(data_cur)
                }
                $.each(r.rows, function(index, value) {
                    idx_name = names.indexOf(value.name)
                    month = value.month
                    data[idx_name][value.month-1] = value.cnt
                })

                for (let i = 0; i < names.length; i++) {
                    if(i < (names.length - 1)) {
                        series_data.push({
                            name: names[i],
                            type: 'bar',
                            data: data[i],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        })
                    } else {
                        series_data.push({
                            name: names[i],
                            type: 'bar',
                            data: data[i],
                            markPoint: {
                                data: [
                                    {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        })
                    }
                }
                for (let i = 0; i < names.length; i++) {
                    yAxis_data.push(
                        {
                            type: 'value',
                            name: names[i],
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    )
                }

                var baroption = {
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: names
                    },
                    grid: {
                        x: 30,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: yAxis_data,
                    series: series_data
                };
                barChart.setOption(baroption);
                window.onresize = barChart.resize;
            })


        });
    </script>
</body>
</html>
